<template>
	<view class="marquee">
	    <view class="marquee-track" :style="{'--duration': speed +'s'}">
			<slot></slot>
			<slot></slot>
	      <!-- 把要滚动的内容放这里；为了无缝，复制一次 -->
	     <!-- <view class="marquee-item">这是要横向匀速滚动的内容 — 可以是文字、图片或任意元素。</view>
	      <view class="marquee-item">这是要横向匀速滚动的内容 — 可以是文字、图片或任意元素。</view> -->
	    </view>
	  </view>
</template>

<script setup>
	defineProps({
		speed: {
			type: Number,
			default: 15
		}
	})
</script>

<style lang="scss" scoped>
	.marquee {
	  width: 100%;
	  overflow: hidden;
	  white-space: nowrap;
	  box-sizing: border-box;
	  /* 控制高度 */
	  // height: 48px;
	  display: flex;
	  align-items: center;
	}
	
	/* 轨道：双份内容并排以实现无缝滚动 */
	.marquee-track {
	  display: inline-flex;
	  gap: 12rpx;
	  align-items: center;
	  /* 动画时长：调这个控制速度，数值越小越快 */
	  // --duration: 10s;
	  animation: marquee-linear var(--duration) linear infinite;
	}
	
	/* 每个项样式（可以自定义） */
	.marquee-item {
	  display: inline-flex;
	  align-items: center;
	  padding: 0 24px;
	  font-size: 16px;
	}
	
	/* 从0% -> -50% （因为内容复制一份）实现无缝 */
	@keyframes marquee-linear {
	  0%   { transform: translateX(0); }
	  100% { transform: translateX(-50%); }
	}
</style>